<template>
	<view class="head">
		<view>电影分类</view>
		<!-- 类型 -->
		<scroll-view scroll-x="true" class="item" enhanced="true" show-scrollbar="false">
			<view style="width: 100%;white-space: nowrap;overflow: auto;">
				<span v-for="(item,index) in typeSort" :key="index" :class="selectSort.typeSort==index?'sort_nav active_type':'sort_nav'" @click="changeTypeSort(index)">{{item}}</span>
			</view>
		</scroll-view>
		<!-- 地区-->
		<scroll-view scroll-x="true" class="item" enhanced="true" show-scrollbar="false">
			<view style="width: 100%;white-space: nowrap;overflow: auto;">
				<span v-for="(item,index) in regionSort" :key="index" :class="selectSort.regionSort==index?'sort_nav active_type':'sort_nav'" @click="changeRegionSort(index)">{{item}}</span>
			</view>
		</scroll-view>
		<!-- 年份 -->
		<scroll-view scroll-x="true" class="item" enhanced="true" show-scrollbar="false">
			<view style="width: 100%;white-space: nowrap;overflow: auto;">
				<span v-for="(item,index) in yearSort" :key="index" :class="selectSort.yearSort==index?'sort_nav active_type':'sort_nav'" @click="changeYearSort(index)">{{item}}</span>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeSort:["全部","喜剧","爱情","动作","恐怖","科幻","剧情","犯罪","奇幻","战争","动漫","古装","伦理","历史"],
				regionSort:["全部","大陆","美国","香港","韩国","日本","法国","英国","德国","台湾","泰国","印度"],
				yearSort:["全部","2022","2021","2020","2019","2018","2017","2016","2015","2014","2013","2012"],
				// 选择的条件，默认都为全部
				selectSort:{
					typeSort:0,
					regionSort:0,
					yearSort:0
				},
				list_data:"",
				page:1,
				size:12
			}
		},
		methods: {
			
			// 根据条件获取数据
			async getTypeList(){
				let typeSort=this.typeSort[this.selectSort.typeSort]
				let regionSort=this.regionSort[this.selectSort.regionSort]
				let yearSort=this.yearSort[this.selectSort.yearSort]
				let term={
					type:typeSort,
					district:regionSort,
					year:parseInt(yearSort)
				}
				this.$emit("GetMoveList",term)
				// let res=await uniCloud.callFunction({
				// 	name:"sort_list",
				// 	data:{
				// 		type:term,
				// 		page:this.page,
				// 		size:this.size
				// 	}
				// })
				
			},
			changeTypeSort(index){
				this.selectSort.typeSort=index
				this.getTypeList()
			},
			changeRegionSort(index){
				this.selectSort.regionSort=index
				this.getTypeList()
			},
			changeYearSort(index){
				this.selectSort.yearSort=index
				this.getTypeList()
			}
		},
		mounted() {
			this.getTypeList()
		},
	
	}
</script>

<style scoped>
	.head{
		position: relative;
		padding-top: 180rpx;
		padding-bottom: 100rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		color: white;
		background: linear-gradient(182deg,#83a4d4,#b6fbff);
	}
	.sort_nav{
		margin-right: 30rpx;
		padding-bottom: 10rpx;
	}
	.item{
		margin-top: 30rpx;
		display:flex;
		white-space: nowrap;
	}
	::-webkit-scrollbar {
	 width: 0;
	 height: 0;
	 color: transparent;
	}
	.active_type {
		color: #fcc419;
		border-bottom: 1rpx solid #fcc419;
		display: inline-block;
	}

</style>
